<template>
  <div class="common-layout" v-if="!isNotFound">
    <el-container>
      <el-header>
        <WeatherHeader />
      </el-header>
      <div class="header-placeholder"></div>
      <el-main>
        <!--路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
    <AboutWeather v-if="isShow" />
  </div>
  <router-view v-else></router-view>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/weather.js'
const store = useWeatherStore()
const { isShow } = storeToRefs(store)
const { lodaStorageCtiys } = store
import WeatherHeader from '@/components/WeatherHeader.vue'
import AboutWeather from '@/components/AboutWeather.vue'

const route = useRoute()
const isNotFound = computed(() => route.name === 'NotFound')

onMounted(() => {
  //读取存储的
  lodaStorageCtiys()
})
</script>

<style>
@import 'reset-css';
body {
  background: #00668a;
}
.el-header {
  position: fixed;
  height: 80px;
  width: 100%;
  background: #00668a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-placeholder {
  height: 80px;
}
.el-main {
  /* max-width: 1280px; */
  /* color: #fff; */
  /* margin: 10px auto; */
  overflow-x: hidden;
  overflow-y: hidden;
  /* padding: 24px 180px; */
  padding: 0;
}
</style>
